<template>
  <div>
    <n-card>
      交易密码
      <br />
      <span style="color: rgba(0, 0, 0, 0.45)">
        当前密码&nbsp;{{ isSetPassword ? '已' : '未' }}设置
        <component
          :is="isSetPassword ? Reset : ''"
          style="float: right; margin-top: -17px; margin-left: 8px"
        />
        <component
          :is="isSetPassword ? ReviseDeal : SetPassword"
          style="float: right; margin-top: -17px"
        />
      </span>
    </n-card>
    <n-card style="margin-top: 4px">
      登录密码
      <br />

      <span style="color: rgba(0, 0, 0, 0.45)">
        当前密码强度&nbsp;{{ passwordGrade == '1' ? '低' : passwordGrade == '2' ? '中' : '高' }}
        {{ passwordGrade == '1' ? '建议修改密码' : '' }}
        <ReviseLogin style="float: right; margin-top: -17px" />
        <!-- <ResetPassword style="float: right; margin-top: -17px; margin-right: 8px" /> -->
      </span>
    </n-card>
  </div>
</template>

<script lang="ts" setup>
import { ref } from 'vue';
import SetPassword from '@/components/modal/setPassword.vue';
import ReviseDeal from '@/components/modal/reviseDeal.vue';
import Reset from '@/components/modal/reset.vue';
import ReviseLogin from '@/components/modal/reviseLogin.vue';
import ResetPassword from '@/components/modal/ResetPassword.vue';

const isSetPassword = ref(true); // 是否设置过交易密码

const passwordGrade = ref('1'); // 登录密码强度
</script>
<style>
.n-card__content {
  margin-top: 16px;
}
</style>